 @import url(https://fonts.googleapis.com/css?family=Rock+Salt);
 @import url(https://fonts.googleapis.com/css?family=Dancing+Script);
 /* ---------------------------------------------------------------------------- */
/* ------------------------------------Html-Body------------------------------- */
/* ---------------------------------------------------------------------------- */
html, body {width:100%; padding:0; margin:0;}
body {color: #1c424d;font-family: "Roboto Slab","Helvetica Neue",Helvetica,Arial,sans-serif;}

/* ---------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------- */
html { -webkit-text-size-adjust: none;}
.video embed,.video object,.video iframe { width: 100%;  height: auto;}
img{max-width:100%;	height: auto;width: auto\9; /* ie8 */}

a {color: #79b6e4;-webkit-transition: all .2s ease-in-out;-moz-transition: all .2s ease-in-out;transition: all .2s ease-in-out;}
a:hover, a:focus {
	text-decoration: none;
	color: #f1b60f;
}

h1 {font-weight: 700;}
h1 strong {font-weight: 900;}
h2 {font-size: 36px;margin: 0;}
h3 {font-size: 16px;font-weight: 700;}
h5 {text-transform: uppercase;font-weight: 700;line-height: 20px;}

h1,
h2,
h3,
h4,
h5,
h6 {text-transform: uppercase;font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight: 700;}

ul, ol {list-style: none;}

.img-centered {margin: 0 auto;}
.tlinks{text-indent:-9999px;height:0;line-height:0;font-size:0;overflow:hidden;}
.clear{content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix:after, .clearfix:before{clear: both; content: '\0020'; display: block; visibility: hidden; width: 0; height: 0;}

/* --Line-- */
hr {height: 3px;width: 60px;position: relative;background: #626a29;border: 0;margin-bottom: 30px;}


/* ---------------------------------------------------------------------------- */
/* ---------------------------------Header+Nav--------------------------------- */
/* ---------------------------------------------------------------------------- */
#menu {padding: 20px;transition: all 0.8s;}
#menu.navbar-default {background-color: rgba(248, 248, 248, 0);border: none;}
#menu a.navbar-brand {text-transform: uppercase;font-size: 22px;color: #d9e0e2;font-weight: 700;letter-spacing: 1px;}
#menu a.navbar-brand i.fa {color: #f3ca27;}
#menu.navbar-default .navbar-nav > li > a {text-transform: uppercase;color: #d9e0e2;font-size: 12px;letter-spacing: 1px;}
#menu.navbar-default .navbar-nav > li > a:hover {color: #f3ca27;}
.on {background-color: #032731 !important;padding: 0 !important;}

.navbar-default .navbar-nav > .active > a, 
.navbar-default .navbar-nav > .active > a:hover, 
.navbar-default .navbar-nav > .active > a:focus {color: #f3ca27 !important;background-color: transparent;}
.navbar-toggle {border-radius: 0;}

.navbar-default .navbar-toggle:hover, 
.navbar-default .navbar-toggle:focus {background-color: #f3ca27;border: none;}
.navbar-default .navbar-toggle:hover>.icon-bar {background-color: #FFF;}

/* Home Style */
header {background-size: cover;color: #d9e0e2;background-color: #011f29; position: relative;height: 420px;}
header p {color: #d9e0e2;font-size: 19px;margin-bottom: 40px;text-transform: uppercase;letter-spacing: 1px;}
.intro-text {position: relative;padding-top: 150px;padding-right: 0;padding-left: 0;padding-bottom: 50px;}
.intro-text h1 {font-size: 65px;text-transform: uppercase;color: #d9e0e2;letter-spacing: 2px;}	

/* ---------------------------------------------------------------------------- */
/* -------------------------------------Content-------------------------------- */
/* ---------------------------------------------------------------------------- */
#page-content{}
#page-content.index-page {}

/* ---HomePage--- */
.box-content,
article {padding: 100px 0;}
.heading{padding: 20px 0 30px;}
.heading h2{font-weight: 400;margin-bottom: 26px;}

.box-content.box-style {}
.box-content.box-style{padding: 80px 0;background: white;}
.box-content.box-style i.fa {font-size: 30px;padding: 5px;color: #f1b60f;}
.box-content.box-style hr {background: #a9971c;}

/* ---------------------------------------------------------------------------- */
/* ------------------------------Welcome(box-1)------------------------------- */
/* ---------------------------------------------------------------------------- */

.categories {padding-bottom: 30px;text-align: center;}

ul.cat{margin: 0;padding: 0;}
ul.cat li {display: inline-block;}
ol.type li {margin: 10px 0 10px 20px;}
ol.type li:first-child {margin-left: 0;}
ol.type li a {color: #51633d;border: 1px solid #f7dc6f;padding: 8px 16px;border-radius: 3px;}
ol.type li a.active {background: #f7dc6f;}
ol.type li a:hover {background: #f7dc6f;}

.isotope-item {z-index: 2}
.isotope-hidden.isotope-item {z-index: 1}
.isotope, .isotope .isotope-item {-webkit-transition-duration: 0.8s;-moz-transition-duration: 0.8s;transition-duration: 0.8s;}
.isotope-item {margin-right: -1px;-webkit-backface-visibility: hidden;backface-visibility: hidden;}
.isotope {-webkit-backface-visibility: hidden;backface-visibility: hidden;-webkit-transition-property: height, width;-moz-transition-property: height, width;transition-property: height, width;}
.isotope .isotope-item {-webkit-backface-visibility: hidden;backface-visibility: hidden;-webkit-transition-property: -webkit-transform, opacity;-moz-transition-property: -moz-transform, opacity;transition-property: transform, opacity;}


.hover-bg .hover-text {position: absolute;text-align: center;margin: 0 auto;color: #c0cbce;background: rgba(3, 46, 58, 0.8);padding: 25% 0;height: 100%;width: 100%;opacity: 0;transition: all 0.5s;}
.hover-bg .hover-text>h4 {opacity: 0;-webkit-transform: translateY(100%);transform: translateY(100%);transition: all 0.3s;font-size: 20px;}
.hover-bg:hover .hover-text>h4 {opacity: 1;-webkit-backface-visibility: hidden;-webkit-transform: translateY(0);transform: translateY(0);}
.hover-bg .hover-text>i {opacity: 0;-webkit-transform: translateY(0);transform: translateY(0);transition: all 0.3s;}
.hover-bg:hover .hover-text>i {opacity: 1;-webkit-backface-visibility: hidden;-webkit-transform: translateY(100%);transform: translateY(100%);}
.hover-bg:hover .hover-text {opacity: 1;}
.portfolio-modal .modal-content {padding: 100px 0;min-height: 100%;border: 0;border-radius: 0;text-align: center;background-clip: border-box;-webkit-box-shadow: none;box-shadow: none;background: #f1b60f;}
.portfolio-item {margin-bottom: 30px;}
.portfolio-item .hover-bg {height: 260px;overflow: hidden;position: relative;}
.portfolio-modal .modal-content h2 {margin-bottom: 15px;font-size: 2.5em;}
.portfolio-modal .modal-content p {margin-bottom: 30px;}
.portfolio-modal .modal-content p.item-intro {margin: 10px 0 30px;font-size: 14px;font-style: italic;}
.portfolio-modal .modal-content ul.list-inline {margin-top: 0;margin-bottom: 30px;}
.portfolio-modal .modal-content img {margin-bottom: 30px;}
.portfolio-modal .close-modal {position: absolute;top: 25px;right: 25px;width: 75px;height: 75px;background-color: transparent;cursor: pointer;}
.portfolio-modal .close-modal:hover {opacity: .3;}
.portfolio-modal .close-modal .lr {z-index: 1051;width: 1px;height: 75px;margin-left: 35px;background-color: #222;-webkit-transform: rotate(45deg);-ms-transform: rotate(45deg);transform: rotate(45deg);}
.portfolio-modal .close-modal .lr .rl {z-index: 1052;width: 1px;height: 75px;background-color: #222;-webkit-transform: rotate(90deg);-ms-transform: rotate(90deg);transform: rotate(90deg);}
.portfolio-modal .btn-primary {color: #a7b6ba;background-color: #1d434e;border-color: #1d434e;}
.portfolio-modal .btn-primary:hover, 
.portfolio-modal .btn-primary:focus, 
.portfolio-modal .btn-primary.focus, 
.portfolio-modal .btn-primary:active, 
.portfolio-modal .btn-primary.active {color: #a7b6ba;background-color: #032e3a;border-color: #032e3a;}

/* ----------------- */
/* ---MainContent--- */
#main-content {background: #fff;}

article{padding: 70px 0 70px;}
article:after, article:before{clear: both; content: '\0020'; display: block; visibility: hidden; width: 0; height: 0;}
article img{max-height: 400px;width: 100%; border: none;}
article .art-header{}
article .art-content{padding: 40px ;}
article .art-content blockquote {border-left: 3px solid #1c7791;font-size: 18px;margin: 0 50px;font-style: italic;color: #666;padding-left: 20px;}
article .art-content ol {float: left;text-align: justify;margin: 10px 50px;font-size: 16px;list-style-type: circle;}

article .entry-title {margin: 0 0 20px;text-align: center;}
article  h1.entry-title{line-height: 1.2;font-size: 38px;}
article h2{line-height: 1.1;font-size: 20px;margin: 0;}
article .info a{ color: #BE0A0A;}
article .info a:hover{ text-decoration: underline;}
/* ---------------------------------------------------------------------------- */
/* -------------------------------------Footer--------------------------------- */
/* ---------------------------------------------------------------------------- */
#footer {background: #032731;padding: 15px 0 10px 0;color: #42626b;text-align: center;}
#footer p {margin-top: 10px;}

/* ---------------------------------------------------------------------------- */
/* ------------------------------------Button---------------------------------- */
/* ---------------------------------------------------------------------------- */
.btn:active,
.btn.active {background-image: none;outline: 0;-webkit-box-shadow: none;box-shadow: none;}

a:focus, 
.btn:focus, 
.btn:active:focus, 
.btn.active:focus, 
.btn.focus, 
.btn:active.focus, 
.btn.active.focus {outline: none;outline-offset: none;}

.btn-default {color: #294d57;font-family: 'Open Sans', sans-serif;background-color: #f1b60f;border: 0;margin: 0 8px;font-size: 18px;transition: all 0.5s;}
.btn-default:hover, 
.btn-default:focus, 
.btn-default.focus, 
.btn-default:active, 
.btn-default.active {background-color: #c1a618;}

/* ---------------------------------------------------------------------------- */
/* -------------------------------------Contact-------------------------------- */
/* ---------------------------------------------------------------------------- */
#contact_form {padding:25px;}

#ff label {cursor:pointer;margin:px 0;display:block;font-weight:bold;}
#ff input {display:block;width:100%;color:#000;padding:10px;margin: 5px 0 25px 0;}
#ff textarea {display:block;width:100%;height:180px;background-color:#fff; color:#000;padding:10px;margin: 5px 0 25px 0;}

#ff .sendButton {border: none;cursor:pointer;background-color: #000;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;;width:100px;color:#ffffff;}
#ff .sendButton:hover {background-color: #333;}

/* ---------------------------------------------------------------------------- */
/* --------------------------------Google-Map---------------------------------- */
/* ---------------------------------------------------------------------------- */
.maps iframe{
    pointer-events: none;
}

#scratch-stage {
	border: 5px solid black;
    height: 300px;
    width: 400px;
    margin-bottom: 20px
}

#contact-portrait{
    height: 50px;
    width: 50px;
    margin-right: 10px;
    border-radius: 50px;
}

/* ---------------------------------------------------------------------------- */
/* --------------------------------Responsive---------------------------------- */
/* ---------------------------------------------------------------------------- */
@media (max-width: 768px) {
	.content {
		padding: 40% 0 0;
	}
	header p {font-size: 15px;margin-bottom: 30px;}
.intro-text {position: relative;padding-top: 120px;padding-bottom: 40px;}
.intro-text h1 {font-size: 45px;}	
}

@media (max-width: 603px) {
	#menu.navbar-default {
		background-color: rgba(0, 0, 0, 0.7);
	}
	.hover-bg .hover-text {
		padding: 12% 10%;
	}
}

@media (max-width: 360px) {
	.hover-bg .hover-text {
		padding: 22% 10%;
	}
}
